<template>
	<view>
		<my-bar :bgColor="theme"><block slot="content">群聊示例</block></my-bar>
		<view class="cu-chat">
			<template v-for="item in msgs">
				<view class="cu-item self" v-if="item.me">
					<view class="main">
						<view class="content bg-green shadow">
							<text>{{ item.msg }}</text>
						</view>
					</view>
					<view class="cu-avatar radius" :style="{ backgroundImage: 'url(' + item.photo + ')' }"></view>
					<view class="date">{{ item.time }}</view>
				</view>

				<view class="cu-item" v-if="item.he">
					<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
					<view class="main">
						<view class="content shadow">
							<text>{{ item.msg }}</text>
						</view>
					</view>
					<view class="date ">{{ item.time }}</view>
				</view>
			</template>

			<!--<view class="cu-info round">对方撤回一条消息!</view>-->
			<!--
			<view class="cu-info">
				<text class="cuIcon-roundclosefill text-red "></text>
				对方拒绝了你的消息
			</view>
			<view class="cu-info">
				对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
				<text class="text-blue">发送好友验证</text>
			</view>
			<view class="cu-item self">
				<view class="main"><image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" class="radius" mode="widthFix"></image></view>
				<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
				<view class="date">13:23</view>
			</view>
			<view class="cu-item self">
				<view class="main">
					<view class="action text-bold text-grey">3"</view>
					<view class="content shadow"><text class="cuIcon-sound text-xxl padding-right-xl"></text></view>
				</view>
				<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
				<view class="date">13:23</view>
			</view>
			<view class="cu-item self">
				<view class="main">
					<view class="action"><text class="cuIcon-locationfill text-orange text-xxl"></text></view>
					<view class="content shadow">喵星球，喵喵市</view>
				</view>
				<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
				<view class="date">13:23</view>
			</view>
			<view class="cu-item">
				<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
				<view class="main">
					<view class="content shadow">@#$^&**</view>
					<view class="action text-grey">
						<text class="cuIcon-warnfill text-red text-xxl"></text>
						<text class="text-sm margin-left-sm">翻译错误</text>
					</view>
				</view>
				<view class="date">13:23</view>
			</view>-->
		</view>

		<view class="cu-bar foot input" :style="[{ bottom: InputBottom + 'px' }]">
			<view class="action"><text class="cuIcon-sound text-grey"></text></view>
			<input class="solid-bottom" v-model="msg" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10" @focus="InputFocus" @blur="InputBlur" />
			<view class="action"><text class="cuIcon-emojifill text-grey"></text></view>
			<button class="cu-btn bg-green shadow" @click="sendmsg">发送</button>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { mywebsocket } from '@/common/mywebsocket.js';
export default {
	computed: {
		...mapState('base', ['logo', 'appName', 'theme'])
	},
	data() {
		return {
			InputBottom: 0,
			channel: 'jiaoyou', //群聊频道
			online: 0,
			websocket: null,
			msgs: [], //客户端1收到的信息   [{msg:'',me:'',he:''}]
			msg: ''
		};
	},
	onShow() {
		var that = this;
		var eventHanders = [
			{
				event: 'online',
				hander: function(res) {
					that.online < res && (that.online = res);
				}
			}
		];
		var msgHanders = [
			{
				cmd: 'hello',
				hander: function(msg) {
					that.online = msg.data;
				}
			},
			{
				cmd: 'bye',
				hander: function(msg) {
					that.online = msg.data;
				}
			},
			{
				cmd: 'msg',
				hander: function(data) {
					console.log(that.msgs);
					if (data.sender.clientId == that.websocket.getClientId()) {
						console.log(data.sender.clientId == that.websocket.getClientId());
						that.msgs.push({ me: data.sender.clientId, msg: data.data.text, photo: data.sender.pic, time: data.data.time });
					} else {
						that.msgs.push({ he: data.sender.clientId, msg: data.data.text, photo: data.sender.pic, time: data.data.time });
					}
					//console.log(data);
				}
			}
		];
		this.websocket = this.websocket || mywebsocket(this.channel, msgHanders, eventHanders);
	},
	onUnload() {
		this.websocket && this.websocket.leaveChan(this.channel) && this.websocket.close();
	},
	methods: {
		InputFocus(e) {
			this.InputBottom = e.detail.height;
		},
		InputBlur(e) {
			this.InputBottom = 0;
		},
		sendmsg() {
			msg = this.msg;
			if (!msg) return;
			var pic = 'https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg'; //this.loginInfo.hasLogin ? this.imgServer + this.loginInfo.user.avatar : '';
			// console.error(pic)
			//pic="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3256100974,305075936&fm=26&gp=0.jpg"
			var msg1 = {
				text: msg,
				time: new Date()
			};
			//console.log(msg1)
			var msg = this.websocket.getCmd().msg(msg1, this.channel, { clientId: this.websocket.getClientId(), pic: pic });
			this.websocket.SendChannelMsg(this.channel, msg);
			// this.$refs.barrage.add(msg1);
		}
	}
};
</script>

<style>
page {
	padding-bottom: 100upx;
}
</style>
